<!--
 * @Description: 第一章入门
 * @Author: IA ia@ker.center
 * @Date: 2025-02-25 16:22:35
-->
<template>

  <div>
    <h1>Router Study XM</h1>
    <hr />
    <div>
      <div>
        <h2>第一章入门</h2>
        <router-link to="/footer/">login</router-link>
        <router-link to="/footer/reg" style="margin-left: 10px;">reg</router-link>
      </div>
      <hr />
      <div>
        <h2>第二章-命名路由-编程式导航</h2>
        <div>
          <h3>命名路由</h3>
          <router-link :to="{ name: 'login' }">login</router-link>
          <router-link :to="{ name: 'reg' }" style="margin-left: 10px;">reg</router-link>
        </div>
        <div>
          <h3>a 标签 会刷新页面</h3>
          <a href="/">login</a>
          <a href="/reg" style="margin-left: 10px;">reg</a>
        </div>
        <div>
          <h3>编程式导航</h3>
          <button @click="toPage1('./')">login route push url</button>
          <button @click="toPage1('./reg')">reg route push url</button>
          <button @click="toPage2('login')">login route push name</button>
          <button @click="toPage2('reg')">reg route push name</button>
        </div>
        <hr />
        <div>
          <h3>第三章-历史记录</h3>
          <router-link replace to="/footer/">login</router-link>
          <router-link replace to="/footer/reg" style="margin-left: 10px;">reg</router-link>
          <button @click="toPage3('./')" style="margin-left: 10px;">login route replace url</button>
          <button @click="toPage3('./reg')" style="margin-left: 10px;">reg route replace url</button>

          <button @click="prev()" style="margin-left: 10px;">prev</button>
          <button @click="next()" style="margin-left: 10px;">next</button>

        </div>
        <hr />
        <div>
          <h3>第四章-路由传参</h3>
          <div>
            <table cellspacing="0" class="table" border="1">
              <thead>
                <tr>
                  <th>品牌</th>
                  <th>价格</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr :key="item.id" v-for="item in data">
                  <td>{{ item.name }}</td>
                  <td>{{ item.price }}</td>
                  <td>
                    <button @click="toDetail1(item)">传参query</button>
                    <button @click="toDetail2(item)">传参params</button>
                    <button @click="toDetail3(item)">动态路由参数</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <hr />
        <div>
          <h3>第六章-命名视图</h3>
          <router-link to="/root">root</router-link>
        </div>
        <hr />
        <div>
          <h3>第七章-重定向-别名</h3>
          <router-link to="root1" style="margin-left: 10px;">/root1</router-link>
          <router-link to="/root2" style="margin-left: 10px;">/root2</router-link>
        </div>
      </div>
    </div>
  </div>
  <router-view></router-view>
</template>
<script setup lang="ts">

// 第一章入门
import { useRouter } from 'vue-router'

const router = useRouter()


// 第二章-命名路由-编程式导航
const toPage1 = (url: string) => {
  // 字符串跳转方式
  // router.push(url)
  // 对象跳转方式
  router.push({
    path: url
  })
}

const toPage2 = (name: string) => {
  // 命名式跳转方式
  router.push({
    name: name
  })
}

// 第三章-历史记录
const toPage3 = (url: string) => {
  router.replace(url)
}

const next = () => {
  router.go(1)
}

const prev = () => {
  // 往前走-1，等于往后倒1
  // router.go(-1)
  // 往后倒1
  router.back()
}

// 第四章-路由传参
import { data } from './components/list.json'


type Item = {
  name: string;
  price: number;
  id: number;
}

// 使用 useRoute 的 query
const toDetail1 = (item:Item) => {
  // query 只能接受对象
  router.push({
    path: '/footer/reg2',
    query: item
  })
}

// 使用 Params路由传参，不能用path，只能用name
// 这种做法已经失效
// 
// [Vue Router warn]: Discarded invalid param(s) "name", "price", "id" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.
const toDetail2 = (item:Item) => {
  // params 只能接受对象
  router.push({
    name: 'reg2',
    params: item
  })
}

// 动态路由传参
const toDetail3 = (item:Item) => {
  console.log('toDetail3 item: ', item)
  router.push({
    name: 'reg3',
    params: {
      id: item.id
    }
  })
}

</script>
<style scoped>
h1,
h2,
h3,
h4,
hr {
  margin: 10px 0;
}

.table {
  width: 400px;
}

</style>